<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      table {
         width: 80%;
         margin: 100px auto;
         border-collapse: collapse;
      }

      td {
         text-align: center;
      }

      #num {
         width: 50px;
         height: 20px;
         line-height: 20px;
         outline: none;
      }

      button {
         width: 36px;
         height: 24px;
         line-height: 24px;
         text-align: center;
         border-radius: 8px;
      }
   </style>
</head>

<body>
   <div class="warp">
      <table border="1">
         <thead>
            <tr>
               <th></th>
               <th>名称</th>
               <th>单价</th>
               <th>数量</th>
               <th>小计</th>
            </tr>
         </thead>
         <tbody>

            <!-- <tr>
                <td>
                  <input type="checkbox" name="" id="">
                </td>
                <td>
                    <img src="" alt="">
                    <p>Casio/卡西欧 EX-TR350</p>
                </td>
                <td>
                    <span>5000</span>
                </td>
                <td>
                    <button>-</button>
                    <input type="text" id="num" value="1">
                    <button>+</button>
                </td>
                <td>
                   <span>5000</span>
                </td>
             </tr> -->
         </tbody>
         <tfoot>
            <!-- <tr>
               <td>
                  <input type="checkbox" name="" id="all">全选
               </td>
               <td colspan="2">
                  <span>总量:</span>
                  <span>0</span>
               </td>
               <td colspan="2">
                  <span>总金额:</span>
                  <span>0</span>
               </td>
            </tr> -->
         </tfoot>
      </table>
   </div>
   <script>
      var data = [
         {
            "img": "./imgs/1.jpg",
            "name": "Casio/卡西欧 EX-TR350",
            "price": 5000,
            "num": 1
         },
         {
            "img": "./imgs/2.jpg",
            "name": "Canon/佳能 PowerShot SX50 HS",
            "price": 3000,
            "num": 2

         },
         {
            "img": "./imgs/3.jpg",
            "name": "Sony/索尼 DSC-WX300",
            "price": 1300,
            "num": 1
         },
         {
            "img": "./imgs/4.jpg",
            "name": "Fujifilm/富士 instax mini 25",
            "price": 2999,
            "num": 1
         }
      ]

      class Shop {
         constructor(option) {
            Object.assign(this, option);
            this.init();
            this.num=0;
            this.price=0;
         }
         render(){
            var that=this
            this.tbody.innerHTML=this.data.map(function(item,i){
               return `<tr>
                <td>
                  <input type="checkbox" class=${i} ${that.check.includes(String(i)) ? 'checked' :''}='' name="" id="">
                </td>
                <td>
                    <img src="${item.img}" alt="">
                    <p>${item.name}</p>
                </td>
                <td>
                    <span>${item.price}</span>
                </td>
                <td>
                    <button class=${i}>-</button>
                    <input type="text" id="num" value="${item.num}">
                    <button class=${i}>+</button>
                </td>
                <td>
                   <span>${item.num*item.price}</span>
                </td>
             </tr>`
            }).join('');
            this.tfoot.innerHTML=` <tr>
               <td>
                  <input type="checkbox" ${that.check.length==that.tbody.children.length ? 'checked' :''}='' name="" class="all">全选
               </td>
               <td colspan="2">
                  <span>总量:</span>
                  <span>${that.num||0}</span>
               </td>
               <td colspan="2">
                  <span>总金额:</span>
                  <span>${that.price||0}</span>
               </td>
            </tr>`
         }
         bindclick(){   
            var that=this;
            this.tbody.addEventListener('click',function(e){
               if(e.target.innerHTML=='-'&&that.data[e.target.className].num>0){
                  that.data[e.target.className].num=that.data[e.target.className].num-1;
               }
               if(e.target.innerHTML=='+'){
                  that.data[e.target.className].num=that.data[e.target.className].num+1;
               }
               if(e.target.type=='checkbox' ){
                  var t=that.check.includes(e.target.className)
                  if(t){
                     var ind=that.check.indexOf(e.target.className);
                     that.check.splice(ind,1);
                  }else{
                     that.check.push(e.target.className);
                  }
               }
             
               // console.log(that.check);
               var num=0;
               var price=0;
               for(var a=0;a<that.check.length;a++){
                  num=num+that.data[that.check[a]].num
               }
               for(var b=0;b<that.check.length;b++){
                  price=price+that.data[that.check[b]].num*that.data[that.check[b]].price
               }

               that.num=num;
               that.price=price;
               that.render();
            });
            
            this.tfoot.addEventListener('click',function(e){
               if(e.target.className=='all' && e.target.checked){
                  for(var a=0;a<that.data.length;a++){
                     that.check.push(String(a));
                  }
                  // that.check=new Set(that.check);
               }else{
                  that.check=[];
               }
               var num=0;
               var price=0;
               for(var a=0;a<that.check.length;a++){
                  num=num+that.data[that.check[a]].num
               }
               for(var b=0;b<that.check.length;b++){
                  price=price+that.data[that.check[b]].num*that.data[that.check[b]].price
               }

               that.num=num;
               that.price=price;
               that.render();
            });  
                    
         }
         init(){
            this.render()
            this.bindclick()
         }
      }
      var shop = new Shop({
         data: [
            {
               "img": "./imgs/1.jpg",
               "name": "Casio/卡西欧 EX-TR350",
               "price": 5000,
               "num": 1
            },
            {
               "img": "./imgs/2.jpg",
               "name": "Canon/佳能 PowerShot SX50 HS",
               "price": 3000,
               "num": 2
            },
            {
               "img": "./imgs/3.jpg",
               "name": "Sony/索尼 DSC-WX300",
               "price": 1300,
               "num": 1
            },
            {
               "img": "./imgs/4.jpg",
               "name": "Fujifilm/富士 instax mini 25",
               "price": 2999,
               "num": 1
            }
         ],
         tbody:document.querySelector('tbody'),
         check:[],
         tfoot:document.querySelector('tfoot')
      });
   </script>
</body>

</html>